window.onload = function () {
    const img = document.querySelector('.set a img')
    const form = document.querySelector('form')
    const formNew = document.querySelector('.form_new')
    const three = document.querySelector('#three')
    const four = document.querySelector('#four')
    const one = document.querySelector('#one')
    const two = document.querySelector('#two')
    const codeSpan = document.querySelector('.code span')
    const codeSpan1 = document.querySelector('.code_1 .span_1')
    const code_1 = document.querySelector('.code_1')
    const ban = document.querySelector('.ban')
    const ban1 = document.querySelector('.ban_1')
    const errorCode = document.querySelector('.errorCode')
    const errorCode1 = document.querySelector('.errorCode_1')
    const error = document.querySelector('.error')
    const error_1 = document.querySelector('.error_1')
    const sucess1 = document.querySelector('.sucess_1')
    const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    let flag = true
    let flag2 = true
    let random = []
    let item = []
    let allow = true
    //获取本地数据
    let  useArr  = JSON.parse(localStorage.getItem('ledgerUsers') || [])
    //获取手机号
    useArr.forEach(function (items, index) { 
        item.push(items.tel);
    })
    //随机生成六位数验证码
    function generateRandomNumFour() {
        let result = '';
        for(let i = 0; i< 6; i++) {
        result += Math.floor(Math.random() * 10).toString();
        }
        return result;
    }
    //顶部返回主页
    img.addEventListener('touchstart',function(){
        location.href = './系统设置.html'
    })
    //判断下一步按钮是否禁用
    function next (){
        if(allow && two.value === random[0]){
            ban.disabled = false
            ban.style.background = '#EF4F3F'
           }else{
            ban.disabled =true
           } 
    }
    //手机号验证
    one.addEventListener('change',function(){
        allow =item.find((ele) => ele === one.value);
        console.log(allow);
          if(allow){
            codeSpan.addEventListener('touchstart',function(){
                if(flag){
                  flag = false
                  let index =60
                  random.push(generateRandomNumFour())
                  const setTime = setInterval(() => {
                      index--
                      codeSpan.style. paddingLeft =  '8px';
                      codeSpan.innerHTML = `${index}s后重新获取`
                      if(index === 0){
                          clearInterval(setTime)
                          flag = true
                          codeSpan.innerHTML = '获取验证码'
                      }
                  }, 1000);
                  errorCode.style.display = 'block'
                  errorCode.innerHTML = `验证码是:${random[0]}`
                }
              })
           }
          if(allow){
            error.style.display = 'none'
         }else{
            error.style.display = 'block'
        }
        next()
    })
    //验证码验证
    two.addEventListener('change',function(){
        if(two.value === random[0]){
            errorCode.style.display = 'none'
        }else{
            errorCode.innerHTML = `验证码输入有误! 请重新输入`
            errorCode.style.display = 'block'
        }
        next()
    })
   //页面跳转验证
    ban.addEventListener('touchstart',function(e){
    e.preventDefault()
    if(allow && two.value === random[0]){
        formNew.style.display = 'block'
        form.style.display = 'none'
    }else{
        formNew.style.display = 'none'
        form.style.display = 'block'
    }
    })
    //判断确认绑定按钮是否禁用
    function nextStep (){
    if( reg.test(three.value) && four.value === random[1]){
        ban1.disabled = false
        ban1.style.background = '#EF4F3F'
       }else{
        ban1.disabled =true
       } 
    }
    //新手机号验证
    three.addEventListener('change',function(){
    if(reg.test(three.value) === true){
        codeSpan1.addEventListener('touchstart',function(){
            if(flag2){
                flag2 = false
                let index =60
                random.push(generateRandomNumFour())
                const setTime1 = setInterval(() => {
                    index--
                    codeSpan1.style. paddingLeft =  '8px';
                    codeSpan1.innerHTML = `${index}s后重新获取`
                    if(index === 0){
                        clearInterval(setTime1)
                        flag2 = true
                        codeSpan1.innerHTML = '获取验证码'
                    }
                }, 1000);
                errorCode1.style.display = 'block'
                errorCode1.innerHTML = `验证码是:${random[1]}`
              }
            })
        error_1.style.display = 'none'
        three.style.borderColor = '#F4F4F4'
    }else{
        error_1.style.display = 'block'
        three.style.borderColor = '#EF4F3F'
    }
    nextStep()
    })
    //验证码验证
    four.addEventListener('change',function(){
    if(four.value === random[1]){
        errorCode1.style.display = 'none'
        code_1.style.borderColor = '#F4F4F4'
    }else{
        errorCode1.innerHTML = `验证码输入有误! 请重新输入`
        errorCode1.style.display = 'block'
        code_1.style.borderColor = '#EF4F3F'
        four.style.borderColor = '#EF4F3F'
    }
    codeNum = (four.value === random[1])
    nextStep()
    })
    //是否绑定成功并页面跳转
    ban1.addEventListener('touchstart',function(e){
    e.preventDefault()
    if( reg.test(three.value) && four.value === random[1]){
       useArr.forEach(function (items, index) { 
       if(items.tel === allow){
        items.tel = three.value
       }
    })  
    localStorage.setItem("ledgerUsers", JSON.stringify(useArr))
       let num = 3
      const setTime1 = setInterval(() => {
         num--
         sucess1.style.display = 'block'
         if(num === 0){
            clearInterval(setTime1)
            sucess1.style.display = 'none'
        }
       }, 1000);
    }
    setTimeout(() => {
        location.href = './系统设置.html'
    }, 3000); 
    })
}